<template>
  <div>
    <Card>
      <Row>
        <Col span="24">
          <age-sum-line-echart :width="echartWidth1" :height="400" ref="echart3"></age-sum-line-echart>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top: 50px;">
      <Row>
        <Col span="24">
          <age-sum-pie-echart :width="echartWidth2" :height="400" ref="echart2"></age-sum-pie-echart>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top: 50px;">
      <Row>
        <Col span="24">
          <age-sum-bar-echart :width="echartWidth1" :height="400" ref="echart1"></age-sum-bar-echart>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import { getAgeGroupSumList } from '@/api/eventlist'
import AgeSumBarEchart from '../compoments/age-sum-bar-echart/index'
import AgeSumPieEchart from '../compoments/age-sum-pie-echart/index'
import AgeSumLineEchart from '../compoments/age-sum-line-echart/index'
export default {
  name: 'age',
  components: {
    AgeSumBarEchart,
    AgeSumPieEchart,
    AgeSumLineEchart,
  },
  data () {
    return {
      echartWidth1: (document.documentElement.clientWidth - 300),
      echartWidth2: (document.documentElement.clientWidth - 300),
      dataInfo:{}
    }
  },
  computed: {},
  methods: {
    init () {
      getAgeGroupSumList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataInfo = ret.data.data
          this.dataInfo.forEach(function (temp,index) {
            if (temp.age !== undefined) {
              temp.age = temp.age + '岁'
            } else {
              temp.age = '未知'
            }
          })
          this.$refs.echart1.chart(this.dataInfo)
          this.$refs.echart2.chart(this.dataInfo)
          this.$refs.echart3.chart(this.dataInfo)
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
  },
  mounted (){
    this.init()
  },
  watch: {
  }
}
</script>
